<template>
  <div class="yewuliangmaoyie">
    <div class="leftchart">
      <div class="c1-title">
         跨境贸易月度航空运输量
      </div>
      <div ref="chart1" class="chartbox"></div>
    </div>
    <div class="rightchart">
      <div class="c2-title">
        跨境贸易月度航空业务量
      </div>
      <div ref="chart2" class="chartbox"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ditu',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
      this.getEchartData1()
      this.getEchartData2()
    },
    methods: {
      getEchartData1() {
        const chart1 = this.$refs.chart1;
        if (chart1) {
          const myChart = this.$echarts.init(chart1)
          var that = this;
          that.$myHttp.post("getTongGuanSHenBaoInfo")
            .then(function(data0) {
              if (data0.status == "200") {

              } else {
                alert("数据请求错误")
              }

            })
            .catch(function(error) {
              alert(error)
            })
          const option = {
            grid: {
              containLabel: true,
              left: that.commonFunction.fontSize(0.1),
              top: that.commonFunction.fontSize(0.5),
              right: that.commonFunction.fontSize(0.1),
              bottom: that.commonFunction.fontSize(0.1),
              // show:true ,
            },

            legend: {
              data: ['进口', '出口'],
              orient: 'horizontal', // 'vertical'
              x: '66%', // 'center' | 'left' | {number},
              y: that.commonFunction.fontSize(0.2), // 'center' | 'bottom' | {number}
              padding: that.commonFunction.fontSize(0.1), // [5, 10, 15, 20]
              itemGap: that.commonFunction.fontSize(0.1),
              textStyle: { //图例文字的样式
                color: '#fff',
                fontSize: that.commonFunction.fontSize(0.12)
              },
              itemWidth: that.commonFunction.fontSize(0.13),
              itemHeight: that.commonFunction.fontSize(0.08),
            },
            tooltip: {},
            dataset: {
              source: [{
                  product: '2020-04',
                  '出口': 493.4,
                  '进口': 386.16
                },
                {
                  product: '2020-05',
                  '出口': 1684.38,
                  '进口': 519.21
                },
                {
                  product: '2020-06',
                  '出口': 3022.64,
                  '进口': 589.2
                },
                {
                  product: '2020-07',
                  '出口':4085.54,
                  '进口': 1149.62
                },
                {
                  product: '2020-08',
                  '出口': 3699.45,
                  '进口': 878.59
                },
                {
                  product: '2020-09',
                  '出口':4315.57,
                  '进口':1037.08
                },
                {
                  product: '2020-10',
                  '出口': 3806.37,
                  '进口': 1084.2
                },
                {
                  product: '2020-11',
                  '出口': 4036.32,
                  '进口':1201.85
                },
                {
                  product: '2020-12',
                  '出口':2484.42,
                  '进口':904.44
                },{
                  product: '2021-01',
                  '出口':3089.17,
                  '进口': 1270.42
                },{
                  product: '2021-02',
                  '出口':1226.37,
                  '进口': 496.74
                }
              ]
            },
            xAxis: {
              type: 'category',
              axisLabel: {
                show: true,
                rotate:'40',
                textStyle: {
                  color: '#65baec', //更改坐标轴文字颜色
                  fontSize: that.commonFunction.fontSize(0.12) //更改坐标轴文字大小
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#1449a1' //更改坐标轴颜色
                }
              }
            },
            yAxis: {
              axisLabel: {
                show: true,
                //rotate:'30',
                textStyle: {
                  color: '#65baec', //更改坐标轴文字颜色
                  fontSize: that.commonFunction.fontSize(0.12) //更改坐标轴文字大小
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#1449a1' //更改坐标轴颜色
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#052661',
                  //type:'dashed'虚线
                }
              },
              name: '单位：吨',
              nameTextStyle: {
                color: '#c3dbff',
                lineHeight: that.commonFunction.fontSize(0.12),
                fontSize: that.commonFunction.fontSize(0.12),
                verticalAlign: 'bottom'
              }
            },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{
                name: '出口',
                type: 'bar',
                barWidth: '10',
                itemStyle: {

                  normal: {

                    color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#027a8e'
                      },
                      {
                        offset: 1,
                        color: '#027a8e'
                      }
                    ]),
                    borderWidth: 1,
                    borderColor: '#01d2dc'
                    // barBorderRadius:[5, 5, 0, 0]
                  }
                }
              },
              {
                name: '进口',
                type: 'bar',
                barWidth: '10',
                itemStyle: {
                  normal: {
                    color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(42, 50, 111, .8)'
                      },
                      {
                        offset: 1,
                        color: 'rgba(42, 50, 111, .8)'
                      }
                    ]),
                    borderWidth: 1,
                    borderColor: '#495a9e',
                    // barBorderRadius:[5, 5, 0, 0]
                  }
                }
              }
            ]
          };
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      },
      getEchartData2() {
        const chart2 = this.$refs.chart2;
        if (chart2) {
          const myChart2 = this.$echarts.init(chart2)
          var that = this;
          that.$myHttp.post("getTongGuanSHenBaoInfo")
            .then(function(data0) {
              if (data0.status == "200") {

              } else {
                alert("数据请求错误")
              }

            })
            .catch(function(error) {
              alert(error)
            })
          const option = {
            grid: {
              containLabel: true,
              left: that.commonFunction.fontSize(0.1),
              top: that.commonFunction.fontSize(0.5),
              right: that.commonFunction.fontSize(0.3),
              bottom: that.commonFunction.fontSize(0.1),
              // show:true ,
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12', '2021-01', '2021-02'],
              axisLabel: {
                show: true,
                rotate:'40',
                textStyle: {
                  color: '#65baec', //更改坐标轴文字颜色
                  fontSize: that.commonFunction.fontSize(0.12) //更改坐标轴文字大小
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#1449a1' //更改坐标轴颜色
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                //rotate:'30',
                textStyle: {
                  color: '#65baec', //更改坐标轴文字颜色
                  fontSize: that.commonFunction.fontSize(0.12) //更改坐标轴文字大小
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#1449a1' //更改坐标轴颜色
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#052661',
                  //type:'dashed'虚线
                }
              },
              name: '单位：万元',
              nameTextStyle: {
                color: '#c3dbff',
                lineHeight: that.commonFunction.fontSize(0.12),
                fontSize: that.commonFunction.fontSize(0.12),
                verticalAlign: 'bottom'
              }
            },
            series: [{

              data: [15124.20,35649.89,57123.61,84275.43,95995.58,129908.04,143198.14,200262.22,174853.61,141616.40,44166.68 ],
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#fb8410', //改变折线点的颜色
                  lineStyle: {
                    color: '#253A5D' //改变折线颜色
                  }
                }
              },
              areaStyle: {
                normal: {
                  //前四个参数代表位置 左下右上，如下表示从上往下渐变色 紫色到暗蓝色，
                  color: new that.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                        offset: 0,
                        color: 'rgba(35, 140, 190, 1)'
                      },
                      {
                        offset: 1,
                        color: 'rgba(76, 143, 243, 0)'
                      }
                    ]
                  )
                }
              },
            }]
          };
          myChart2.setOption(option)
          window.addEventListener("resize", function() {
            myChart2.resize()
          })
        }
      }
    }
  }
</script>

<style>
  .yewuliangmaoyie {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }

  .leftchart {
    width: 50%;
    height: 100%;
  }

  .rightchart {
    width: 50%;
    height: 100%;
  }

  .c1-title {
    width: 100%;
    height: .28rem;
    background: url(../../../../static/img/huangkongyunshukuayuedu.png) no-repeat left center;
    color: #ffffff;
    line-height: .28rem;
    font-size: .16rem;
    padding-left: .10rem;
  }

  .c2-title {
    width: 100%;
    height: .28rem;
    background: url(../../../../static/img/kuajinmaoyiyueduzoushi.png) no-repeat left center;
    color: #ffffff;
    line-height: .28rem;
    font-size: .16rem;
    padding-left: .10rem;
  }

  .chartbox {
    width: 100%;
    height: 100%;
    display: block;
  }
</style>
